<template>
	<view class="container">
		<u-navbar title="更改昵称">
			<view slot="right" class="save-btn" @tap="requsetUpdateUserinfo()">
				<text>保存</text>
			</view>
		</u-navbar>
		<input type="text" value="" v-model="username" class="name-input" maxlength="15"/>
		<text class="yqts">好名字可以让你的朋友更容易记住你。</text>
	</view>
</template>

<script>
	import {updateUserinfo,getUserinfo} from '@/apis/request.js'
	export default {
		data() {
			return {
				username:'',
				token:''
			}
		},
		created() {
			this.username=uni.getStorageSync('userInfo').name;
			this.token=uni.getStorageSync('userInfo').token;
		},
		methods: {
			requsetUpdateUserinfo(){
				uni.showLoading({
					title:'正在保存'
				});
				this.$http({
					url:updateUserinfo,
					method:"POST",
					data:{
						name:this.username
					},
					header:{
						'Token':this.token,
						'content-type':'application/x-www-form-urlencoded'
					}
				})
				.then(res=>{
					if(res[1].data.status=='200'){
						this.requestGetuserInfo();
					}
				})
				.catch(err=>{
					console.log(err);
				});
			},
			requestGetuserInfo(){
			     this.$http({
					url:getUserinfo,
					 method:"GET",
					 data:{},
					 header:{
						 'content-type':'application/x-www-form-urlencoded',
						 'Token':this.token
					 }
				 })
				 .then(res=>{
					 if(res[1].data.status=='200'){
						 uni.hideLoading();
						 uni.setStorageSync('userInfo',res[1].data.data);
						 uni.navigateBack({
						 	delta:1
						 });
					 }
				 })
				 .catch(err=>{
					 console.log(err);
				 });
			}
		}
	}
</script>

<style lang="scss">
     page{
		 width: 100%;
		 height: 100%;
	 }
	 .container{
		 width: 100%;
		 height: 100%;
		 .save-btn{
			 width: 70px;
			 height: 30px;
			 border-radius: 5px;
			 background-color: #19BE6B;
			 color: #FFFFFF;
			 font-size: 15px;
			 text-align: center;
			 line-height: 30px;
		 }
		 .name-input{
			 width: 680rpx;
			 height: 80rpx;
			 line-height: 80rpx;
			 font-size: 28rpx;
			 border-bottom: 1rpx solid #F1F1F1;
			 margin: auto;
		 }
		 .yqts{
			 color: #888;
			 font-size: 25rpx;
			 display: block;
			 width: 680rpx;
			 height: 80rpx;
			 line-height: 80rpx;
			 margin: auto;
		 }
	 }
</style>
